import React, { Component } from 'react';
import Header from '../../components/Header';
import Banner from '../../components/Banner';
import Nav from '../../components/Nav'
import Rempro from '../../components/Rempro';
import KillPros from '../../components/Killpros';
import '../../styles/Home.scss'
// import ReactDOM from 'react-dom'
import { PullToRefresh } from 'antd-mobile'
import { UpOutline } from 'antd-mobile-icons'
import service from '../../api'
interface Home {
    myRef: any
    refs: any
    state: any
}
class Home extends Component {
    constructor(props: any) {
        super(props)
        this.myRef = React.createRef()
        this.state = {
            show: false,
            bannerlist: [],
            count: 1
        }
    }
    async componentDidMount() {
        await service.banner.getBannerList().then(res => {
            console.log(res)
            this.setState({
                bannerlist: res.data.data
            })
        })
    }

    scrollMe() {
        // let main=document.querySelector('main')
        let scollTop = this.myRef.current.scrollTop
        // console.log(scollTop)
        this.setState({
            show: scollTop >= 600
        })
    }
    backTo() {
        // console.log(this.myRef.current.scrollTop)
        this.myRef.current.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
   async onRefresh() {
      await this.setState({
            count: this.state.count + 1
        }, () => {
            service.pro.getPros({ count: this.state.count, limitNum: 12 }).then(res => {
                if (res.data.data.length === 0) {
                    this.setState({
                        count: 1
                    })
                }
            })
        })
        console.log(this.state.count)
    }
    render() {
        return (
            <div className='home'>
                <Header />
                <PullToRefresh onRefresh={async () => { this.onRefresh() }}>
                    <main onScroll={() => { this.scrollMe() }} ref={this.myRef}>
                        <div className='banners'>
                            <Banner swiperlist={this.state.bannerlist} />
                        </div>

                        <Nav />
                        <KillPros />
                        <Rempro count={this.state.count} />
                        {this.state.show ? <div className='backTop' onClick={() => { this.backTo() }}>
                            <UpOutline />
                        </div> : <div></div>}
                    </main>
                </PullToRefresh>
            </div>
        );
    }
}

export default Home;